<template>
    <view class="content">
        <image src="../../static/image/us_bg.png" class="us-bg"></image>
        <view class="wrapper">
            <view class="top">
                <view class="top-left" @click="toLogin">
                    <image :src="info.image || '../../static/icon/avatar.png'" class="avatar"></image>
                    <view class="u-flex-1">
                        <view class="name">{{info.nickname || '用户名称'}}</view>
                        <view class="u-flex" v-if="info && info.phone">
                            <image src="../../static/icon/tel.png" class="tel-icon"></image>
                            <view class="tel">{{info.phone}}</view>
                        </view>
                    </view>
                </view>
                <view class="edit-btn" @click="toPage('/pages/mine/info')">编辑资料</view>
            </view>
            
            <view class="nav-box">
                <image src="../../static/image/img_03.png" class="img-03"></image>
                <view class="nav">
                    <view :class="{active : type == 0}" @click="chooseNav(0)">全部活动</view>
                    <view :class="{active : type == 1}" @click="chooseNav(1)">待支付</view>
                    <view :class="{active : type == 2}" @click="chooseNav(2)">已报名</view>
                    <view :class="{active : type == 3}" @click="chooseNav(3)">已核销</view>
                    <view :class="{active : type == 4}" @click="chooseNav(4)">售后</view>
                </view>
            </view>
            
            <view class="tip-box">
                <image src="../../static/icon/tip.png" class="tip-icon"></image>
                <view>活动开始前3小时之内不可退款</view>
            </view>
            <!-- order_status 1待支付 2已支付 3已核销 4已退款 -->
            <view class="item" v-for="(item, index) in list" :key="index" @click="toPage('/pages/order/order-details?id=' + item.id)">
                <view class="item-top">
                    <view></view>
                    <view class="dzf" v-if="item.order_status == 1">待支付</view>
                    <view class="dzf" v-if="item.order_status == 2">已报名</view>
                    <view class="yhx" v-if="item.order_status == 3">已核销</view>
                    <view class="sh" v-if="item.order_status == 4">售后</view>
                </view>
                <view class="item-down">
                    <image :src="item.image" class="img"></image>
                    <view class="item-down-r">
                        <view class="title">{{item.title}}</view>
                        <view class="u-flex">
                            <view class="time" v-if="item.status == 1 || item.status == 2">
                                <image src="../../static/icon/time_01.png" class="time-01"></image>
                                <view>活动时间：{{item.start_time}}-{{item.end_time}}</view>
                            </view>
                            <view class="time end" v-if="item.status == 3">
                                <image src="../../static/icon/time_02.png" class="time-01"></image>
                                <view>已结束</view>
                            </view>
                            <view></view>
                        </view>
                        <view class="price" v-if="item.order_status == 1">
                            待付金额：<text>￥<text class="price-num">{{item.order_amount}}</text></text>
                        </view>
                    </view>
                </view>
                <view class="btns" v-if="item.order_status == 1 || item.order_status == 2">
                    <view class="btn1" @click.stop="toPay(item)" v-if="item.order_status == 1">立即支付</view>
                    <view class="btn2" @click.stop="toAfter(item)" v-if="item.order_status == 2">申请售后</view>
                    <view class="btn1" v-if="item.order_status == 2">核销码</view>
                </view>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#40bef1" height="110" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [
                    {
                        iconPath: "/static/icon/tab.png",
                        selectedIconPath: "/static/icon/tab.png",
                        text: '',
                        pagePath: "/pages/tabbar/index",
                        customIcon: false
                    },{
                        iconPath: "/static/icon/tab_01.png",
                        selectedIconPath: "/static/icon/tab_02.png",
                        text: '活动',
                        customIcon: false,
                        pagePath: "/pages/tabbar/activity"
                    },{
                        iconPath: "/static/icon/tab_03.png",
                        selectedIconPath: "/static/icon/tab_04.png",
                        text: '商务合作',
                        customIcon: false,
                        pagePath: "/pages/tabbar/work"
                    },{
                        iconPath: "/static/icon/tab_05.png",
                        selectedIconPath: "/static/icon/tab_06.png",
                        text: '城会玩',
                        customIcon: false,
                        pagePath: "/pages/tabbar/city-games"
                    },{
                        iconPath: "/static/icon/tab_07.png",
                        selectedIconPath: "/static/icon/tab_08.png",
                        text: '个人中心',
                        customIcon: false,
                        pagePath: "/pages/tabbar/mine"
                    }
                ],
                type: 0,//
                info: {},
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	} 
            });
        },
        onShow() {
            if (this.$getSync('userToken')) {
                this.getInfo()
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            }
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            // refund 1能退 2不能
            toAfter(item) {
                if (item.refund == 1) {
                    this.$gTo('/pages/order/after?id=' + item.id)
                } else {
                    this.$toast('活动开始前3小时之内不可退款');
                    return
                }
            },
            
            toLogin() {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/loginH')
                }
            },
            
            toPay(item) {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/loginH')
                } else {
                    this.$gTo(`/pages/pay/pay?id=${item.id}&money=${item.order_amount}`)
                }
            },
            
            chooseNav(num) {
                if (this.type == num)return
                this.type = num
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            toPage(url) {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/loginH')
                } else {
                    this.$gTo(url)
                }
            },
            
            // 获取列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('activity_orders', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    order_status: this.type,//0全部 1待支付 2已报名 3已核销 4售后
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.orders && ret.detail.orders.length > 0) {
            				this.list = this.list.concat(ret.detail.orders);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.info = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            // onPageScroll: function(e) {
            // 	//nvue暂不支持滚动监听，可用bindingx代替
            // 	// console.log("滚动距离为：" + e.scrollTop);
            // 	let a = e.scrollTop * 0.05;
            // 	if (a > 1) {
            // 		a = 1;
            // 	}
            // 	if (e.scrollTop == 0) {
            // 		this.background.backgroundColor = 'rgba(64,190,241,0)';
            // 	} else {
            // 		this.background.backgroundColor = 'rgba(64,190,241,' + a + ')';
            // 	}
            // }, 
        }
    };
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    
</style>

<style lang="scss">
    /deep/.u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 132rpx !important;
        height: 50rpx !important;
        margin-top: 15rpx;
    }
    
    page{
        background-color: #fafafa;
    }
    .us-bg{
        width: 750rpx;
        height: 280rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .wrapper{
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        padding: 25rpx 20rpx;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .top-left{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }
    .avatar{
        width: 116rpx;
        height: 116rpx;
        border-radius: 50%;
        border: 2rpx solid #fff;
        margin-right: 25rpx;
    }
    .name{
        font-size: 36rpx;
        // font-weight: bold;
        color: #fff;
        padding-bottom: 10rpx;
    }
    .tel-icon{
        width: 15rpx;
        height: 20rpx;
        margin-right: 10rpx;
    }
    .tel{
        font-size: 24rpx;
        color: #fff;
    }
    .edit-btn{
        font-size: 24rpx;
        color: #40bef1;
        padding: 12rpx 18rpx;
        background-color: #fff;
        border-radius: 50rpx;
        margin-left: 10rpx;
    }
    .nav-box{
        width: 705rpx;
        padding-bottom: 20rpx;
        margin: 0 auto;
    }
    .img-03{
        width: 705rpx;
        height: 162rpx;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-radius: 20rpx;
        margin-top: -65rpx;
        position: relative;
        z-index: 1;
    }
    .nav>view{
        width: calc(705rpx / 5);
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        padding: 33rpx 0;
    }
    .active{
        color: #40bdf0;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 66rpx;
        height: 7rpx;
        background-color: #40bdf0;
        border-radius: 10rpx 10rpx 0 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .tip-box{
        font-size: 24rpx;
        color: #f62a2a;
        padding: 20rpx 15rpx;
        margin-bottom: 20rpx;
        background-color: #fff2f1;
        border-radius: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .tip-icon{
        width: 21rpx;
        height: 21rpx;
        margin-right: 10rpx;
    }
    
    
    .item{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .item-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item-top>view:last-child{
        padding: 6rpx 15rpx;
        border-radius: 0 20rpx 0 20rpx;
        font-size: 22rpx;
    }
    .dzf{
        color: #40bef1;
        background-color: #e8f8ff;
    }
    .yhx{
        color: #4d4d4d;
        background-color: #eaeaea;
    }
    .sh{
        color: #f62a2a;
        background-color: #ffebeb;
    }
    
    .item-down{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10rpx 20rpx 20rpx;
    }
    .img{
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        border: 2rpx solid #e6e6e6;
        margin-right: 25rpx;
    }
    .item-down-r{
        flex: 1;
    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
        width: 470rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 10rpx;
    }
    .time{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 7rpx 12rpx;
        background-color: #fff5ea;
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #ff8400;
    }
    .end{
        background-color: #eaeaea;
        color: #4c4c4c;
    }
    .time-01{
        width: 22rpx;
        height: 22rpx;
        margin-right: 10rpx;
    }
    .price{
        text-align: right;
        font-size: 24rpx;
        padding-top: 25rpx;
    }
    .price>text{
        font-size: 26rpx;
        color: #f62a2a;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20rpx 20rpx 20rpx;
    }
    .btns>view{
        padding: 15rpx 22rpx;
        border-radius: 50rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
        line-height: 1;
    }
    .btn2{
        border: 2rpx solid #e6e6e6;
    }
    .btn1{
        color: #fff;
        background-color: #40bef1;
    }
    
    

</style>
